<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-input v-model="query.topicBankName" placeholder="请输入要查询的题库名"></el-input>
      </el-col>
      <el-col :span="16">
        <el-button type="primary" icon="el-icon-search" plain @click="searchData()" style="margin-left: 5px">搜索
        </el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加一个题库</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
          :data="result.tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="topicBankName"
            label="题库名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="topicBankDescription"
            label="题库描述">
        </el-table-column>
        <el-table-column
            prop="topicBankLabel"
            label="题库标签" width="76">
          <template slot-scope="scope">
            <span style="color: #00AAFF">{{scope.row.topicBankLabel}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="singleChoiceNumber"
            label="单选题数" width="76">
        </el-table-column>
        <el-table-column
            prop="multipleChoiceNumber"
            label="多选题数" width="76">
        </el-table-column>
        <el-table-column
            prop="blankNumber"
            label="填空题数" width="76">
        </el-table-column>
        <el-table-column
            prop="judgeNumber"
            label="判断题数" width="76">
        </el-table-column>
        <el-table-column
            prop="shortAnswerNumber"
            label="简答题数" width="76">
        </el-table-column>
        <el-table-column
            prop="totalNumber"
            label="题目总数" width="76">
        </el-table-column>
        <el-table-column
            prop="creator"
            label="创建人" width="76">
        </el-table-column>
        <el-table-column
            prop="createtime"
            label="创建时间" width="160">
        </el-table-column>
        <el-table-column label="关联题目">
          <template slot-scope="scope">
            <el-link type="primary" @click="getTopicFromBank(scope.row.id)">题目列表</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="margin-top:20px;"
        background
        layout="prev, pager, next"
        :page-count="result.pages"
        :current-page.sync="query.pageNo"
        :page-size="query.pageSize"
        @current-change="getData()"
    ></el-pagination>
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="500px">
      <TopicBankEdit v-if="show" :show.sync="show" @getData="getData()" :editid="editid"></TopicBankEdit>
    </el-dialog>
  </div>
</template>

<script>
import TopicBankEdit from "./edit.vue"
import axios from "@/utils/axiosutils.js"


export default {
  name: "index",
  data() {
    return {
      show: false,
      editid: null,
      title: '',
      query: {
        topicBankName: '',
        pageNo: 1,
        pageSize: 8
      },
      result: {
        tableData: [],
        pages: 0
      },
    };
  },
  components: {TopicBankEdit},
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get(
          '/topicBank/list',
          response => {
            this.result.tableData = response.obj.records;
            this.result.pages = response.obj.pages;
          },
          this.query
      );
    },
    searchData() {
      this.query.pageNo = 1;
      this.getData();
    },
    add() {
      this.title = '添加题库';
      this.editid = null;
      this.show = true;
    },
    handleEdit(id) {
      this.title = '修改题库';
      this.editid = id;
      this.show = true;
    },
    handleDelete(id) {
      axios.del("topic/delete",
          resp=>{
            this.getData();
          }, {
            id: id
          })
    },
    getTopicFromBank(id){
      this.$router.push({path: '/topicBank/content', query: {id:id}});
    }
  }
};
</script>

<style lang="less"></style>